<template>
  <div class="login-container">
    <a-row>
      <a-col :xs="0" :md="0" :sm="12" :lg="14" :xl="16"></a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="6">
        <div
          class="login-container-form"
          :style="{ height: indexTab == 2 ? '500px' : '430px' }"
        >
          <div class="login-container-hello">您好</div>
          <div class="login-container-title">
            欢迎{{ indexTab == 1 ? '登录' : '注册' }} {{ title }}
          </div>
          <a-tabs
            type="card"
            animated
            size="large"
            tab-position="top"
            :activeKey="indexTab"
            @change="callback"
          >
            <!-- 登录表单 -->
            <a-tab-pane key="1" tab="登录">
              <a-form :model="form" @submit="handleSubmit" @submit.prevent>
                <a-form-item>
                  <a-input
                    v-model:value="loginForm.username"
                    placeholder="请输入登录账户"
                  >
                    <template v-slot:prefix>
                      <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                    </template>
                  </a-input>
                </a-form-item>
                <a-form-item>
                  <a-input
                    v-model:value="loginForm.password"
                    type="password"
                    placeholder="输入登录密码"
                  >
                    <template v-slot:prefix>
                      <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                    </template>
                  </a-input>
                </a-form-item>
                <a-form-item>
                  <a-button
                    type="primary"
                    html-type="submit"
                    :disabled="loginForm.username === '' || loginForm.password === ''"
                  >
                    登录
                  </a-button>
                </a-form-item>
              </a-form>
            </a-tab-pane>

            <!-- 注册表单 -->
            <a-tab-pane key="2" tab="注册">
              <a-form :model="form" @submit="toRegister" @submit.prevent>
                <a-form-item>
                  <a-input
                    v-model:value="form.username"
                    placeholder="输入注册账户"
                  >
                    <template v-slot:prefix>
                      <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                    </template>
                  </a-input>
                </a-form-item>
                <a-form-item>
                  <a-input
                    v-model:value="form.password"
                    type="password"
                    placeholder="输入账户密码"
                  >
                    <template v-slot:prefix>
                      <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                    </template>
                  </a-input>
                </a-form-item>
                <a-form-item>
                  <a-input
                    v-model:value="form.password2"
                    type="password"
                    placeholder="再一次输入密码"
                  >
                    <template v-slot:prefix>
                      <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                    </template>
                  </a-input>
                </a-form-item>
                <a-form-item>
                  <a-button
                    type="primary"
                    html-type="submit"
                    :disabled="
                      form.username === '' ||
                      form.password === '' ||
                      form.password2 === ''
                    "
                  >
                    注册
                  </a-button>
                </a-form-item>
              </a-form>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-col>
    </a-row>

    <div class="login-container-tips">
      <div>
        基于vue{{ dependencies['vue'] }}
        + ant-design-vue
        {{ dependencies['ant-design-vue'] }}开发
      </div>
      <!-- author -->
      <div>@author：徐榕杰</div>
    </div>
  </div>
</template>
<script>
import { dependencies, devDependencies } from '*/package.json'
import { mapActions, mapGetters } from 'vuex'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
export default {
  name: 'Login',
  components: {
    UserOutlined,
    LockOutlined,
  },
  data() {
    return {
      // 注册账号密码存储
      form: {
        username: '',
        password: '',
        password2: '',
        picture: 'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif',
        role: 'user',
      },
      loginForm: {
        username: '',
        password: '',
      },
      // 跳转地址
      redirect: undefined,
      dependencies: dependencies,
      devDependencies: devDependencies,
      // 当前tab下标 index = 1 登录  index = 2 注册
      indexTab: '1',
    }
  },
  computed: {
    ...mapGetters({
      logo: 'settings/logo',
      title: 'settings/title',
    }),
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = (route.query && route.query.redirect) || '/'
      },
      immediate: true,
    },
  },
  methods: {
    ...mapActions({
      login: 'user/login',
      register: 'user/register',
    }),
    /**
     * 切换注册 登录
     */
    callback(e) {
      this.indexTab = e
    },
    async toRegister() {
      // 判断两次密码是不是一样
      if (this.form.password != this.form.password2) {
        this.$message.error('两次密码不一致')
        return
      }
      var data = await this.register(this.form)
      // 判断是否注册成功
      if (data) {
        this.$message.success('注册成功')
        // 转换到登录界面
        this.indexTab = '1'
      }
    },
    // 判断是
    handleRoute() {
      return this.redirect === '/404' || this.redirect === '/403'
        ? '/'
        : this.redirect
    },
    // 登录
    async handleSubmit() {
      await this.login(this.loginForm)
      await this.$router.push(this.handleRoute())
    },
  },
}
</script>
<style lang="less">
.login-container {
  height: 100vh;
  background: url('~@/assets/login_images/login_background3.jpg');
  background-size: 100% 100%;
  &-form {
    width: calc(100% - 40px);
    height: 420px;
    padding: 4vh;
    margin-top: calc((100vh - 480px) / 2);
    margin-right: 20px;
    margin-left: 20px;
    // background: url('~@/assets/login_images/login_form.png');
    background-color: rgba(25, 42, 62, 0.8);
    // opacity: 0.8;
    background-size: 100% 100%;
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
  }
  &-hello {
    font-size: 32px;
    color: #fff;
  }
  &-title {
    margin-bottom: 30px;
    font-size: 20px;
    color: #fff;
  }
  &-tips {
    position: fixed;
    bottom: @vab-margin;
    width: 100%;
    height: 40px;
    color: rgba(255, 255, 255, 0.856);
    text-align: center;
  }
  .ant-input {
    width: 400px;
    height: 35px;
  }
  .ant-btn {
    width: calc(345px - 75px);
    height: 45px;
    border-radius: 99px;
  }
}
</style>
